import './mallRepertory.css'
import { Form, Input, InputNumber, Button, Table, Modal, message } from 'antd';
import { getMallInfo, changeMallRepertory } from '../../api/mall'
import { useEffect, useState } from 'react'
function MallRepertory() {
    // 定义表单实例
    const [form] = Form.useForm()
    // 定义模态框状态
    const [isModalOpen, setIsModalOpen] = useState(false);
    // 定义模态框标题
    const [modalTitle, setModalTitle] = useState('')
    // 定义模态框相关方法
    function handleClick(type, row, e) {
        setModalTitle(type)
        setIsModalOpen(!isModalOpen)
        // console.log(row,'rowww');
        form.setFieldsValue({ id: row.id })
    }
    function handleOk() {
        console.log('ok');
        form.validateFields().then((val) => {
            val.type = modalTitle
            changeMallRepertory(val).then((res) => {
                if (res.code == 200) {
                    message.success(res.msg)
                } else if (res.code == 400) {
                    message.error(res.msg)
                }
            }).then(() => {
                form.resetFields()
                getMall()
                setIsModalOpen(!isModalOpen)
            })
        })
    }
    function handleCancel() {
        form.resetFields()
        setIsModalOpen(!isModalOpen)
    }
    // 获取商品信息
    function getMall() {
        getMallInfo().then(res => {
            console.log(res)
            setMallInfo(res.data)
        })
    }
    useEffect(() => {
        getMall()
    }, [])
    // 将商品信息定义
    const [mallInfo, setMallInfo] = useState([])
    const columns = [
        {
            title: '商品名称',
            dataIndex: 'mallName'
        },
        {
            title: '商品型号',
            dataIndex: 'mallVersion'
        },
        {
            title: '商品库存',
            dataIndex: 'mallRepertory'
        },
        {
            title: '操作',
            width:'200px',
            render: (rowData) => {
                return (
                    <div className='actionType'>
                        <Button type="primary" onClick={handleClick.bind('', 'put', rowData)} className='putbtn'>入库</Button>
                        <Button type="primary" onClick={handleClick.bind('', 'delivery', rowData)} className='deliverybtn'>出库</Button>
                    </div >
                )
            }
        }
    ]

    return (
        <div className="mallRepertory">
            <h2>商品入库与出库</h2>
            <div className='mallTable'>
                <Table columns={columns} dataSource={mallInfo} rowKey='id' />
            </div>
            <Modal
                title={modalTitle === 'put' ? '商品入库' : '商品出库'}
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
                okText='确定'
                cancelText='取消'
            >
                <Form
                    /* 设置表单的布局，使用 grid 栅格布局 */
                    labelCol={{
                        span: 6
                    }}
                    wrapperCol={{
                        span: 18
                    }}
                    // 对齐方式
                    labelAlign='left'
                    // 书写表单清空，需要拿到 form 的实例, 要使用 antd 提供的一个钩子函数->form.useForm()
                    form={form}
                >
                    <Form.Item name='id' noStyle>
                        <Input type='hidden'></Input>
                    </Form.Item>
                    <Form.Item label='数量' name='mallRepertory'>
                        <InputNumber placeholder='请输入数量'></InputNumber>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )

}

export default MallRepertory